<template>
    <el-row>
        <el-col :offset="7">
            <el-steps :space="200" :active="1" align-center="false" finish-status="success">
                <el-step title="配置基本信息"></el-step>
                <el-step title="配置合同模板"></el-step>
                <el-step title="配置申请材料"></el-step>
            </el-steps>
        </el-col>
        <br>
        <el-col :span="14" :offset="5">
            <el-form v-model="addProduct" class="form">
                <el-form-item label="产品名称">
                    <el-input v-model="addProduct.productName"></el-input>
                </el-form-item>
                <el-form-item label="产品类型">
                    <el-input v-model="addProduct.productType"></el-input>
                </el-form-item>
                <el-form-item label="签约银行">
                    <el-col :span="6">
                        <el-select v-model="addProduct.bankId" placeholder="请选择">
                            <el-option v-for="item in bankList" :key="item.bankId" :label="item.bankName"
                                :value="item.bankId">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="还款方式">
                    <el-col :span="6">
                        <el-select v-model="addProduct.repayMethodId" placeholder="请选择">
                            <el-option v-for="item in repayMethodList" :key="item.repayMethodId"
                                :label="item.repayMethodName" :value="item.repayMethodId">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
                <el-form-item label="产品封面">
                    <el-upload class="avatar-uploader" action="http://localhost:8080/products/uploadProductCover"
                        name="file" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforerUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="产品封面" prop="productCover" hidden>
                    <el-input v-model="addProduct.productCover" clearable></el-input>
                </el-form-item>
                <el-form-item label="产品介绍">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addProduct.productIntroduction">
                    </el-input>
                </el-form-item>
                <el-form-item label="产品亮点">
                    <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="addProduct.productHighlights">
                    </el-input>
                </el-form-item>
                <el-form-item label="产品标签">
                    <el-radio-group v-model="addProduct.productLabel">
                        <el-radio label="1">新品</el-radio>
                        <el-radio label="2">推荐</el-radio>
                        <el-radio label="3">精品</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="贷款利率">
                    <el-input v-model="addProduct.productRate"></el-input>
                </el-form-item>
                <el-form-item label="贷款额度">
                    <el-input v-model="addProduct.productLoanAmount"></el-input>
                </el-form-item>
                <el-form-item label="贷款期限">
                    <el-radio-group v-model="addProduct.loanTime">
                        <el-radio label="1">1个月</el-radio>
                        <el-radio label="3">3个月</el-radio>
                        <el-radio label="6">6个月</el-radio>
                        <el-radio label="9">9个月</el-radio>
                        <el-radio label="12">12个月</el-radio>
                        <el-radio label="24">24个月</el-radio>
                        <el-radio label="36">36个月</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addP">提 交</el-button>
                    <el-button type="success" :disabled="disabled" @click="addM">下一步</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

</template>

<script>
export default {
    data() {
        return {
            imageUrl: "",
            addProduct: {
                productState: 1,
                productAudit: 1,
                productName: "",
                bankId:"",
                repayMethodId:""
            },
            contractTemplateList: {},
            bankList: {},
            repayMethodList: {},
            contractList: {},
            disabled: true,
            value: "",
            value2:""
        };
    },
    methods: {
        handleSuccess(res, file) {
            this.imageUrl = res.message;
            this.addProduct.productCover = res.message;
        },
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 10;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isJPG && isLt2M;
        },
        loadBank() {
            this.$axios.get("/banks").then((res) => {
                this.bankList = res.data.data.list;
            });
        },
        loadRepayMethod() {
            this.$axios.get("/repayMethods").then((res) => {
                this.repayMethodList = res.data.data.list;
            });
        },
        addP() {
            this.$axios.post("products/add", this.addProduct).then((res) => {
                if (res.data.code == 200) {
                    alert("产品添加成功，请配置合同模板！");
                    this.disabled = false;
                } else {
                    alert("已有同名产品，请修改产品名称！")
                }
            });
        },
        addM() {
            this.$router.push({
                name: 'AddTemplate',
                params: {
                    name: this.addProduct.productName
                }
            })
        }
    },
    mounted() {
        this.loadBank();
        this.loadRepayMethod();
    }
};
</script>

<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>